<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手风琴案例</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        img {
            display: block;
        }

        .king {
            width: 725px;
            margin: 10px auto;
            padding: 6px;
            /*border: 1px solid red;*/
            height: 70px;
            background-color: #143757;
            border-radius: 5px;
        }

        ul li {
            list-style: none;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }

        .small {
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }

        .big {
            width: 224px;
            height: 69px;

        }
    </style>

</head>

<body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var imgs = $(".king li img");
        //给每个图片标签添加大小图片属性
        for (let i = 0; i < imgs.length; i++) {
            let src = imgs[i].src;
            let index = src.lastIndexOf(".");
            imgs[i].smallSrc = src;
            imgs[i].bigSrc = src.substr(0, index - 1) + ".png";
            console.log(imgs[i].smallSrc, imgs[i].bigSrc)
        }
        console.log(imgs)
        //鼠标进入小图片，则小图片换成大图片
        $(".king li").mouseenter(function () {
            console.log($(this))
            let currentItem = $(this).find('.small')
            console.log('currentItem', currentItem)
            currentItem = currentItem[0];
            currentItem.src = currentItem.bigSrc;
            console.log(currentItem.smallSrc, currentItem.bigSrc)

            $(this).css({width: 224})
                .find('.small').removeClass('small').addClass("big")
                .fadeIn();
             //其余图片都应该是小图片
            let smallImgs = $(this).siblings().css({width: 69}).find('img').removeClass('big').addClass("small");
            console.log(smallImgs)
            for (let i = 0; i < smallImgs.length; i++) {
                let src = smallImgs[i].src;
                smallImgs[i].src = smallImgs[i].smallSrc;
                smallImgs.fadeIn();
            }

        })
    })
</script>

<h1 style="color: #333333;text-align: center">农药上头</h1>
<hr>
<div class="king">
    <ul>
        <li>
            <a href="#">
                <img src="images/m1.jpg" alt="" class="small">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/l1.jpg" alt="" class="small">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/c1.jpg" alt="" class="small">

            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/w1.jpg" alt="" class="small">

            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/z1.jpg" alt="" class="small">

            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/h1.jpg" alt="" class="small">

            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/t1.jpg" alt="" class="small">

            </a>
        </li>
    </ul>

</div>


</body>

</html>